<script setup lang="ts">

</script>

<template>
  <div class="pt-20">
    <!-- Research Header -->
    <section class="bg-gradient-to-r text-white section-padding from-purple-600 to-pink-600">
      <div class="container-max">
        <nav class="text-sm mb-6 opacity-80">
          <NuxtLink to="/" class="hover:text-white">
            首页
          </NuxtLink>
          <span class="mx-2">/</span>
          <NuxtLink to="/products" class="hover:text-white">
            产品中心
          </NuxtLink>
          <span class="mx-2">/</span>
          <span>研发产品</span>
        </nav>
        <h1 class="text-4xl font-bold mb-6 md:text-5xl">
          研发产品
        </h1>
        <p class="text-xl max-w-3xl">
          持续创新研发，引领行业技术发展，为客户提供前沿的智能制造解决方案
        </p>
      </div>
    </section>

    <!-- Research Products -->
    <section class="section-padding">
      <div class="container-max">
        <!-- Four Corner Pre-cleaning Machine -->
        <div class="mb-12 rounded-lg bg-white shadow-lg overflow-hidden">
          <div class="gap-0 grid lg:grid-cols-2">
            <div class="p-8 lg:p-12">
              <h2 class="text-3xl title-gradient font-bold mb-6">
                四角预清洗机
              </h2>

              <!-- Technical Specs -->
              <div class="mb-6 p-6 rounded-lg bg-blue-50">
                <h3 class="text-blue-900 font-bold mb-3">
                  技术参数
                </h3>
                <div class="text-sm gap-4 grid grid-cols-2">
                  <div>
                    <span class="font-medium">长度 (L):</span> 4230mm
                  </div>
                  <div>
                    <span class="font-medium">宽度 (W):</span> 2500mm
                  </div>
                  <div class="col-span-2">
                    <span class="font-medium">高度 (H):</span> 1900mm
                  </div>
                </div>
              </div>

              <!-- Research Background -->
              <div class="mb-6">
                <h3 class="font-bold mb-3">
                  研发设计背景
                </h3>
                <p class="text-gray-600 leading-relaxed mb-4">
                  装框后需要人员对四角进行除胶，人员除胶采用无纺布等方式擦拭，
                  有耗材且擦拭不干净存在人工上下料等问题。
                </p>
                <p class="text-gray-600 leading-relaxed">
                  清洗房员工最大工作量为四角溢胶导致的异物、残胶等，
                  过固化房后耗人耗时且不易清洗。
                </p>
              </div>

              <!-- Solution -->
              <div class="mb-6 p-6 rounded-lg bg-green-50">
                <h3 class="text-green-900 font-bold mb-3">
                  解决方案
                </h3>
                <ul class="text-sm space-y-2">
                  <li class="flex items-start">
                    <span class="mr-3 mt-2 rounded-full bg-green-600 flex-shrink-0 h-2 w-2" />
                    <span>自动化四角清洗，减少人工操作</span>
                  </li>
                  <li class="flex items-start">
                    <span class="mr-3 mt-2 rounded-full bg-green-600 flex-shrink-0 h-2 w-2" />
                    <span>高效清洗技术，提升清洁度</span>
                  </li>
                  <li class="flex items-start">
                    <span class="mr-3 mt-2 rounded-full bg-green-600 flex-shrink-0 h-2 w-2" />
                    <span>节省耗材成本，降低运营费用</span>
                  </li>
                  <li class="flex items-start">
                    <span class="mr-3 mt-2 rounded-full bg-green-600 flex-shrink-0 h-2 w-2" />
                    <span>智能控制系统，操作简便</span>
                  </li>
                </ul>
              </div>

              <div class="flex space-x-4">
                <button class="btn-primary">
                  技术咨询
                </button>
                <button class="btn-outline">
                  下载资料
                </button>
              </div>
            </div>

            <div class="relative">
              <div class="bg-gradient-to-br inset-0 absolute from-purple-400 to-pink-500" />
              <div class="p-8 flex h-full items-center justify-center relative">
                <div class="text-white text-center">
                  <div class="text-6xl mb-4">
                    🔧
                  </div>
                  <div class="text-xl font-bold">
                    四角预清洗机
                  </div>
                  <div class="text-sm mt-2 opacity-80">
                    创新清洗技术
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Research & Development Process -->
        <div class="mb-12">
          <h2 class="text-3xl title-gradient font-bold mb-12 text-center">
            研发流程
          </h2>

          <div class="gap-6 grid md:grid-cols-4">
            <!-- Step 1 -->
            <div class="text-center">
              <div class="mx-auto mb-4 rounded-full bg-blue-100 flex h-20 w-20 items-center justify-center">
                <span class="text-2xl text-blue-600">1</span>
              </div>
              <h3 class="font-bold mb-2">
                需求分析
              </h3>
              <p class="text-sm text-gray-600">
                深入了解客户需求，分析市场痛点
              </p>
            </div>

            <!-- Step 2 -->
            <div class="text-center">
              <div class="mx-auto mb-4 rounded-full bg-green-100 flex h-20 w-20 items-center justify-center">
                <span class="text-2xl text-green-600">2</span>
              </div>
              <h3 class="font-bold mb-2">
                方案设计
              </h3>
              <p class="text-sm text-gray-600">
                制定技术方案，优化设计参数
              </p>
            </div>

            <!-- Step 3 -->
            <div class="text-center">
              <div class="mx-auto mb-4 rounded-full bg-purple-100 flex h-20 w-20 items-center justify-center">
                <span class="text-2xl text-purple-600">3</span>
              </div>
              <h3 class="font-bold mb-2">
                样机试制
              </h3>
              <p class="text-sm text-gray-600">
                制作样机原型，进行功能测试
              </p>
            </div>

            <!-- Step 4 -->
            <div class="text-center">
              <div class="mx-auto mb-4 rounded-full bg-red-100 flex h-20 w-20 items-center justify-center">
                <span class="text-2xl text-red-600">4</span>
              </div>
              <h3 class="font-bold mb-2">
                批量生产
              </h3>
              <p class="text-sm text-gray-600">
                完善工艺流程，实现批量生产
              </p>
            </div>
          </div>
        </div>

        <!-- Innovation Features -->
        <div class="p-8 rounded-lg bg-gray-50">
          <h2 class="text-3xl title-gradient font-bold mb-12 text-center">
            创新特色
          </h2>

          <div class="gap-8 grid lg:grid-cols-3 md:grid-cols-2">
            <div class="p-6 rounded-lg bg-white shadow-md">
              <div class="mb-4 rounded-lg bg-blue-100 flex h-12 w-12 items-center justify-center">
                <span class="text-blue-600">🎯</span>
              </div>
              <h3 class="font-bold mb-3">
                精准定位
              </h3>
              <p class="text-sm text-gray-600">
                Z方向精密控制，确保清洗位置准确无误，提高清洗效果
              </p>
            </div>

            <div class="p-6 rounded-lg bg-white shadow-md">
              <div class="mb-4 rounded-lg bg-green-100 flex h-12 w-12 items-center justify-center">
                <span class="text-green-600">⚡</span>
              </div>
              <h3 class="font-bold mb-3">
                高效节能
              </h3>
              <p class="text-sm text-gray-600">
                优化能耗设计，降低运行成本，实现绿色环保生产
              </p>
            </div>

            <div class="p-6 rounded-lg bg-white shadow-md">
              <div class="mb-4 rounded-lg bg-purple-100 flex h-12 w-12 items-center justify-center">
                <span class="text-purple-600">🤖</span>
              </div>
              <h3 class="font-bold mb-3">
                智能控制
              </h3>
              <p class="text-sm text-gray-600">
                集成智能控制系统，自动化程度高，操作简单便捷
              </p>
            </div>

            <div class="p-6 rounded-lg bg-white shadow-md">
              <div class="mb-4 rounded-lg bg-red-100 flex h-12 w-12 items-center justify-center">
                <span class="text-red-600">🛡️</span>
              </div>
              <h3 class="font-bold mb-3">
                安全可靠
              </h3>
              <p class="text-sm text-gray-600">
                多重安全保护机制，确保设备稳定运行，延长使用寿命
              </p>
            </div>

            <div class="p-6 rounded-lg bg-white shadow-md">
              <div class="mb-4 rounded-lg bg-yellow-100 flex h-12 w-12 items-center justify-center">
                <span class="text-yellow-600">🔧</span>
              </div>
              <h3 class="font-bold mb-3">
                易维护
              </h3>
              <p class="text-sm text-gray-600">
                模块化设计，维护简便，降低停机时间和维护成本
              </p>
            </div>

            <div class="p-6 rounded-lg bg-white shadow-md">
              <div class="mb-4 rounded-lg bg-indigo-100 flex h-12 w-12 items-center justify-center">
                <span class="text-indigo-600">📈</span>
              </div>
              <h3 class="font-bold mb-3">
                持续优化
              </h3>
              <p class="text-sm text-gray-600">
                持续收集客户反馈，不断优化产品性能和用户体验
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>

</style>
